<template>
	<div class="book-search-result-container">
		<!-- 搜索结果为空时的提示 -->
		<div v-if="total === '0'" class="empty-result-tip">
			暂无搜索结果，请尝试更换关键词再次搜索哦~
		</div>
		<!-- 循环展示每一条图书搜索结果 -->
		<div class="l-dl" v-for="(book, index) in searchResults" :key="index" @tap="navtoDetail(book)">
			<image class="l-dt" :src="book.coverImg" mode="aspectFill"></image>
			<div class="l-dd">
				<div class="l-dd-title">{{book.name}}</div>
				<div class="l-dd-content">{{book.description}}</div>
				<div class="l-dd-footer">
					<div class="author-name">{{book.author ? book.author : '未知作者'}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Cookies from 'js-cookie';
	import config from '@/utils/config.js';
	export default {
		data() {
			return {
				total: 0,
				searchResults: [] // 存放搜索到的图书结果数据
			};
		},
		onLoad(options) {
			this.doSearch(options.keyword);
		},
		methods: {
			doSearch(keyword) {
				
				const bookPageDto = {
					pageNo: 1, // 默认查询第一页
					pageSize: 20, // 每页显示20条数据
					isAsc: true,
					name: keyword, // 将用户输入关键字作为书名关键词进行匹配
				};
				// 从Cookie获取token
				const token = Cookies.get('token');
				if (!token) {
					uni.hideLoading();
					uni.showToast({
						icon: 'error',
						title: '未获取到有效token，请先登录'
					});
					return;
				}
				uni.request({
					url: `${config.apiBaseUrl}/book/page`,
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						'token': token
					},
					data: bookPageDto,
					success: (res) => {
						uni.hideLoading();
						if (res.data.code === 1) {
							this.searchResults = res.data.data.records;
							this.total = res.data.data.total;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg || '搜索图书失败，请稍后重试'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							icon: 'error',
							title: '搜索图书失败，请检查网络或稍后重试'
						});
					}
				});
			},
			navtoDetail(book) {
				// 跳转到图书详情页的逻辑，这里只是简单打印，实际需使用相应的路由跳转方法
				console.log('跳转到图书详情页，图书信息：', book);
				// 例如使用 uni-app 的路由跳转（假设图书详情页路由名为 book-detail）
				uni.navigateTo({
					url: `/pages/detail/detail?bookId=${book.id}`
				});
			},
			authorImg(author) {
				// 根据作者信息返回对应的图片路径，这里简单返回一个默认图片路径，实际可按需求调整
				return '../../static/logo.png';
			}
		}
	};
</script>

<style>
	.book-search-result-container {
		width: 90%;
		padding: 20upx;
		background-color: #fff;
	}

	.empty-result-tip {
		font-size: 28upx;
		color: #666;
		text-align: center;
		padding: 30upx 0;
	}

	.l-dl {
		display: flex;
		margin-bottom: 20upx;
		border-bottom: 1upx solid #eee;
		padding-bottom: 20upx;
	}

	.l-dt {
		width: 100upx;
		height: 150upx;
		margin-right: 20upx;
	}

	.l-dd {
		position: relative;
		flex: 1;
	}

	.l-dd-title {
		font-size: 30upx;
		font-weight: bold;
		margin-bottom: 10upx;
	}

	.l-dd-content {
		font-size: 28upx;
		color: #666;
		margin-bottom: 20upx;
	}

	.l-dd-footer {
		
	}

	.author-name {
		font-size: 12px;
		color: #333;
	}


	.l-dd-img {
		width: 40upx;
		height: 40upx;
		margin-right: 10upx;
	}
</style>